<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
       <div>
           <h2>create</h2>
           <ul>
               <li><label for="">1<input type="text" v-model="userinfo.id"></label></li>
               <li><label for="">2<input type="text" v-model="userinfo.name"></label></li>
               <li><label for="">3<input type="text" v-model="userinfo.age"></label></li>
               <li><label for="">4<input type="text" v-model="userinfo.sex"></label></li>
               <li><button @click="addUser()">create</button></li>
           </ul>
       </div>

       <div>
        <h2>update</h2>
        <ul>
            <li><label for="">1<input type="text" v-model="editinfo.id"></label></li>
            <li><label for="">2<input type="text" v-model="editinfo.name"></label></li>
            <li><label for="">3<input type="text" v-model="editinfo.age"></label></li>
            <li><label for="">4<input type="text" v-model="editinfo.sex"></label></li>
            <li><button @click="modUser()">update</button></li>
        </ul>
    </div>



       <div v-if="userList.length > 0">
           <table>
               <tr>
                   <th>1</th>
                   <th>2</th>
                   <th>3</th>
                   <th>4</th>
                   <th>5</th>
               </tr>
               <tr v-for="(item,index) in userList">
                   <td>{{item.id}}</td>
                   <td>{{item.name}}</td>
                   <td>{{item.age}}</td>
                   <td>{{item.sex}}</td>
                   <td>
                       <button @click="delUser(index)">删除</button>
                       <button @click="editUser(index)">修改</button>
                   </td>
               </tr>
           </table>
       </div>
       <div v-else>
           <h2>ssss</h2>
       </div>
    </div>

    <script src="../vue-2/js/vue.js"></script>
    <script>
        let myApp = new Vue({
            el:'#app',
            data:{
                userList:[],
                userinfo:{
                    id:'',
                    name:'',
                    age:'',
                    sex:''
                },
                editinfo:{
                    id:'',
                    name:'',
                    age:'',
                    sex:''
                },
                currenIndex:0
            },
            methods:{
                addUser(){
                    this.userList.push(this.userinfo)
                    this.userinfo ={
                        id:'',
                        name:'',
                        age:'',
                        sex:''
                    }
                },
                editUser(index){
                    this.editinfo = JSON.parse(JSON.stringify(this.userList[index]))

                    this.currenIndex = index
                },
                delUser(index){
                    this.userList.splice(index,1)
                },
                modUser(currenIndex){
                    this.userList[this.currenIndex] = this.editinfo

                    this.userList = JSON.parse(JSON.stringify(this.userList))
                },
                find(){
                    let val = this.val
                    this.dataList.forEach( (x) => {
                        if(val.indexOf(x.name) > -1){
                            this.findList.push(x)
                        }
                    })
                }
            }
        })
    </script>

</body>
</html>